昨天講了條件渲染，今天來講列表渲染(List Rendering)吧!!

v-for

當我們在頁面上綁定資料時，遇到一些重複、複雜的data時(像是array、object等等)，就可以使用v-for把這些資料渲染出來。
v-for指令需要以item in items的形式來使用，其中items源數據array，item則是items array裡面的元素，這邊都可以自己取其它的名字!

Array

<div id="app">
    <ul>
        <li v-for="item in array">
            {{ item.pet }}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            array: [
                { pet: '貓貓' },
                { pet: '狗狗' },
			    { pet: '兔兔' }

            ]
        }
    });
</script>

出來的結果就會是”貓貓”、”狗狗”、”兔兔”列表式的排列。

在v-for中也可以使用上層(父作用域)的property，我們也可以使用索引(index)，就是從0開始到陣列長度。
這邊我們幫這些寵物都加上可愛(　ﾟ∀ﾟ) ﾉ♡
然後因為index會從0開始，所以我們+1，這樣就會從1開始!

<div id="app">
    <ul>
        <li v-for="(item,index) in array">
           {{index+1}}. {{cute}}{{ item.pet }}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            cute:'可愛',
            array: [
                { pet: '貓貓' },
                { pet: '狗狗' },
                { pet: '兔兔' }
            ]
        }
    });
</script>

Object

我們也可以用 v-for來遍歷一個object的property，跟在array一樣我們可以加上上層的property，但其巡覽出來的資料是屬性值。
小括號中的三個參數分別是property、property的名稱也就是鍵值key、索引index，也就是(property, key, index)，可以改成自己喜歡的名字歐~

<div id="app">
    <ul>
        <li v-for="(value,name,index) in object">
           {{index+1}}.{{name}}:{{value}}
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            object:{
                title: '菜鳥學前端，一起Vue起來!',
                theme: 'Modern Web',
                start: '2021.09.13'
            }
        }
    });
</script>

在遍歷object時，會按 Object.keys() 的结果遍歷，但是不能保證它的结果在不同的 JavaScript 引擎下都一致。

使用 of 代替 in

前面的例子我們都是以 in 來設定 v-for ，但 vue 也提供了 JavaScript 語法中的 of 當作關鍵字，所以上面的例子都可以將 in 改為 of。

今天講了一些v-for的基本用法，明天要講什麼呢щ(ﾟДﾟщ)